@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}



.web{
	.drawBox{
		position: absolute;
		width: 636px;
		height: 636px;
		top: 50%;
		left: 50%;
		border: 2px solid red;
		transform: translate(-50%,-50%);
		div{
			width: 200px;
			height: 200px;
			font-size: 28px;
			text-align: center;
			background-color: #ff0;
			color: #f00;
			line-height: 200px;
			border: 2px solid #87ceeb;
			position: absolute;
            user-select: none;
			&:nth-child(1){
				top: 6px;
				left: 6px;
			}
			&:nth-child(2){
				top: 6px;
				left: 216px;
			}
			&:nth-child(3){
				top: 6px;
				left: 426px;
			}
			&:nth-child(8){
				top: 216px;
				left: 6px;
			}
			&:nth-child(9){
				top: 216px;
				left: 216px;
			}
			&:nth-child(4){
				top: 216px;
				left: 426px;
			}
			&:nth-child(7){
				top: 426px;
				left: 6px;
			}
			&:nth-child(6){
				top: 426px;
				left: 216px;
			}
			&:nth-child(5){
				top: 426px;
				left: 426px;
			}
            &.active{
                color: #ff0;
                background-color:red;
                transform: scale(.95);
                border-radius: 25%;
            }
            &.starBtn{
                background-color: #c1c1c1;
                color: #fff;
                border-radius: 50%;
                cursor: pointer;
            }
            
            >img{
                width: 50%;
                height: 50%;

                
            }
		}
	}
    .drawBox1{
        overflow: hidden;
        width: 200px;
        height: 200px;
        border: 2px solid bule;

    }
    div{
		transform: translateY(0);
        width: 200px;
        height: 200px;
        font-size: 28px;
        text-align: center;
        background-color: #ff0;
        color: #f00;
        line-height: 200px;
        border: 2px solid #87ceeb;
        user-select: none;
        &.active{
            color: #ff0;
            background-color:red;
            transform: scale(.95);
            border-radius: 25%;
        }
        &.starBtn{
            background-color: #c1c1c1;
            color: #fff;
            border-radius: 50%;
            cursor: pointer;
        }
        >img{
            width: 50%;
            height: 50%;
        }
    }
}